<template>
  <div class="header">
    <div class="logo">
      <div class="left">
        <img  src="../assets/image/logo.png" alt="">
      </div>
    </div>
    <div class="menu">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#182F58"
        text-color="#fff"
        active-text-color="#fff"
        @select="handleSelect"
      >
      <template v-for="item,index in list" >
        <el-menu-item v-if="item.children.length === 0" :index="item.path" :key="index">
             {{item.title}}
        </el-menu-item>
         <el-submenu v-else :index="item.path" :key="item.path">
          <template slot="title">{{item.title}}</template>
          <el-menu-item v-for="child in item.children" :index="child.path" :key="child.title">
             {{child.title}}
          </el-menu-item>
         </el-submenu>
      </template>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: "headerBar",
  data() {
    return {
      show: false,
      activeIndex: "0",
      list: [
        { title: "首页", path: "/", children: [] },
        { title: "同期展会", path: "/exhibit", children: [
          {title: "缝制设备展", path: "/exhibit?id=69",},
          {title: "面辅料纱线展", path: "/exhibit?id=2",},
          {title: "印花工业展", path: "/exhibit?id=3",},
          {title: "服装供应链展", path: "/exhibit?id=4",}
        ] },
        {
          title: "电子会刊", path: "/journal", children: [
            {title: "本届参展商", path: "/journal",},
            {title: "本届展品", path: "/journal/product",},
          ]
        },
        {
          title: "媒体中心", path: "", children: [
            {title: "新闻中心", path: "/news",},
            {title: "合作媒体", path: "/media",},
            {title: "资料下载", path: "/download",},
            {title: "热门Q&A", path: "/qa",},
          ]
        },
        {
          title: "关于我们", path: "/contact", children: [
           
          ]
        }

      ],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.activeIndex = key;
       this.$router.push(key);
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  background: #182F58;
  height: 8.5625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15rem;
}

.left {
  flex: 1;
  width: 16.815rem;
  height: 4.875rem; 
  img {
    width: 100%;
    height: 100%;
  }

}
.menu {
  display: flex;
  flex-wrap: nowrap;
  margin-left: 21px;
 
}
::v-deep .el-menu {
   display: flex;
}
::v-deep .el-menu-item {
  font-size: 1.375rem;
  flex: 1;
  display: flex;

}
::v-deep.el-submenu{
  flex: 1;
  
}
::v-deep .el-submenu__title {
  font-size: 1.375rem;
}
::v-deep .el-menu--horizontal {
  border: none;
}
a{
  color: #fff;
  text-decoration: none;
}
</style>